<template >
  <div class="container font-mono ">
    <div class="text-center text-xl text-gray-500 py-2">{{ month }}月</div>
    <ul class="grid grid-cols-7 gap-1 place-content-center place-items-center">
      <li v-for="day, index in dates" :key="day.date()"
        :class="[!index ? ['col-start-1', 'col-start-2', 'col-start-3', 'col-start-4', 'col-start-5', 'col-start-6', 'col-start-7'][day.date()] : '']"
        :title="day.format('YYYY-MM-DD')">
        <time :datetime="day.format('YYYY-MM-DD')">{{ day.date() }}</time>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
const month = ref(5)
const dates = ref<dayjs.Dayjs[]>()

const getDates = (month: number) => {
  const monthDate = dayjs().month(month - 1)
  dates.value = Array.from({ length: monthDate.daysInMonth() }, (v, i) => dayjs().month(month - 1).date(i + 1))
}
onMounted(() => {
  getDates(month.value)
})
</script>
